CSCI 2541 Columbus State Community College Snail Bait Lab 1 Report
Hello I need some help with 2d game programing I am doing updates for snail bait program I need it by friday before midnight. For chapter 2 change the CSS background discussed in section 2.3. Label this lab2-2.3.(css)(js) with lab2-2.3.html. Investigate the resources you get from https://leaverou.github.io/css3patterns/ and implement them into the snailbait game Then, in section 2.1.3, Debugging, place some console log output at some interesting points in the js code ... labeled lab2.1.3.js.2.3 from textbook Use CSS BackgroundsHTML5 games run in a web browser, so in addition to a game’s background for its playing surface, such as Snail Bait’s red-brick background, you must also consider the webpage background.Figure 2.17 shows Snail Bait’s webpage background, which is drawn with CSS gradients. CSS backgrounds do not incur the overhead associated with an image, and it’s easy to make CSS backgrounds infinitely repeatable in both horizontal and vertical directions so that the background always looks the same regardless of the size of the window. For chapter 3 solve problem #3 first. Name the background bckgnd-3.3.[jpg|gif|png]. Then solve problems 1 and 2. Keep the solutions in separate .js files, lab2-3.1.js and lab2-3.2.js. Answer problem 4 by describing your observations in a Word document, lab2.3.4.docx or a .txt file. Your observations should exceed 50 words. If you can't come up with 50 words, make it up. Also, include any observations for problems 1 to 3 as well. Chapter 3 questions 1. The canvas 2D context has four attributes for drawing shadows: shadowColor: A CSS color string, gradient, or pattern with which to draw the shadow shadowOffsetX: The shadow’s offset, in pixels, in the X direction shadowOffsetY: The shadow’s offset, in pixels, in the Y direction• shadowBlur: A Gaussian blur applied to the shadow; the higher the number, the blurrier the shadow.In the drawPlatform() function in this chapter’s version of the game, set all four of the preceding values in addition to lineWidth, fillStyle, strokeStyle, and globalAlpha, to create shadows underneath the platforms. Do those shadows affect the frame rate?2. Notice that setting context shadow attributes in Exercise 1 not only adds shadows to the platforms but also adds a shadow to the runner’s image. That’s because setting shadow attributes affects all further graphics operations in the canvas (except for getImage() and putImage(), which are not discussed in this book).To add shadows to the platforms but not the runner, save the graphics context at the beginning of drawPlatform() and restore it at the end of the function, with context.save() and context.restore(), respectively. Any settings you make to the graphics context between context.save() and context. restore() are only in effect between those two calls. As a result, you will see shadows underneath the platforms, but not the runner.3. Use a different background for this chapter’s version of the game. Make sure the new background does not have identical rows of vertical pixels on the right and left edges of the left and right sides of the image, respectively, as discussed in Section 3.5, “Scroll the Background,” on p. 78. Is the discontinuity between the two background images obvious as the animation progresses?4. Run this chapter’s version of the game and see if you can slow the frame rate by doing other things on your computer. Good candidates for slowing the game are playing YouTube videos in another browser window; running system backup software; opening semitransparent windows.