Make this code better


Objective: To set a scene and tell a story in 1 minute

Often, computer games are based on a story and designers/developers use cut scenes to help the story progress. In this assignment, you will create a 1 minute cut scene that could be used in a game. You can either create your own cut scene OR re-create a cut scene from a game you are familiar with. The scene should be the opening setup for the game.

In addition, the basic skills of animation and movement are integral to gaming. Once you know how to program animations, it is a short step to have those animations controlled by a user.

Create an opening cut scene for a game. The scene will be graded on the following factors (in no particular order):
The scene should last in length from between 45 sec and 1.25 minutes
There should be at least two characters in the scene
At least one character should be sprite based comprised of a sprite with at least 6 cells
There should be at least two layers of background graphics (a true background and a foreground). The foreground could be comprised of some objects/shapes.
There should be speech bubble conversation between the characters that sets up the game.
There should be at least one element of text that is NOT an image (using the canvas text drawing tools).

Sprite Sheets:
Below, you will see an example of a sprite sheet:

When creating a sprite sheet, there are several factors that need to be true:
All cells of the image must be the same width and height
The total width of the image should be the number of cells x the standard width
If you need a refresher on how to create a sprite sheet, you can refer to the Pixlr Sprite Project from earlier in the year.

The sprite sheet can be tested at the following site:

While there are many sites on the web to find sprite sheets to work with, one of the most comprehensive collections is at

<!DOCTYPE html> <html> <head><title>JASMINE</title> </head> <body style='width:600px; height:230px' onload='initialize();'> <img id='aladdin' scr='aladdin.png'> <style> #grad{ height:230px; width:600px; background:linear-gradient(#1c3448, #3f75a2) } #aladdin{ position: relative; } textarea{ display: block; border: 1px solid #ffffff; font-size:12px; } button {margin-top: 10px; } </style> <div id='grad'> <img src='front.png'/> <canvas id='jas' width='600px' height='230px'> </canvas> </div> <script> var canvas, ctx; var jasX, jasY; var jasTiming; var jasFrameX, jasFrameWidth, jasFrameHeight; var jas= new Image(); jas.src="jasminesprite.png" function initialize(){ var canvas= document.getElementById('jass'); var ctx=canvas.getContext('2d'); jasX=2; jasTiming=0; jasY=210; jasFrameX=0; jasFrameWidth=41; jasFrameHeight=46; update(); } function update(){ jasTiming++ if(jasTiming<=300){ jasX+=3; if(jasFrameX>=10){ jasFrameX=0; } if(jasTiming%3==0){ jasFrameX++; } draw(); requestAnimationFrame(update); } function draw(){ ctx.clearRect(0,0, canvas.width, canvas.height); ctx.beginPath(); ctx.drawImage(jas, jasFrameX*jasFrameWidth, 0, jasFrameWidth, jasFrameHeight, jasX, jasY, jasFrameWidth, jasFrameHeight, ); ctx.closePath(); } } </script> <script> aladdin.onclick = function(){ let start = (); let timer = setInterval(function(){ let timePassed = - start; = timePassed / 5 + 'px'; if (timepassed > 2000) clearInterval (timer); }, 20); } </script> <textarea id="textExample" rows="5" cols="60"> Oh Aladdin where is our gennie now? We need him but he was captured- We need to find the golden key But how do we do that Aladdin </textarea> <button onclick="animateText(textExample)">Click me!</button> <script> function animateText(textArea){ let text = textArea.value; let to = text.length, from = 0; animate({ duration: 5000, timing: bounce, draw: function(progress){ let result = (to - from)* progress + from textArea.value = text.substr(0,Math.ceil(result)) } }); } function bounce(timeFraction){ for (let a = 0, b = 1, result; 1; a += b, b /= 2){ if (timeFraction >= (7 - 4 * a) / 11){ return -Math.pow((11-6* a - 11 * timeFraction)/ 4, 2)+ Math.pow(b, 2); } } } </script> </body> </html>

Reactions 0 reactions

No reactions yet, be the first: comment or tweak the code

Comment on this code:

Please Login or Register to leave a comment.