Ankita Mandal
5 years ago
parent
88f03118ce
commit
5a10cd6f5e
@ -0,0 +1,211 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas style="margin-top:30px;display: block ;padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto;" id="myCanvas" width="520" height="520">
|
||||||
|
|
||||||
|
</canvas>
|
||||||
|
<br>
|
||||||
|
<marquee>Ankita🎖️Mandal</marquee>
|
||||||
|
<marquee><i>Snake game live demo🔥 Play and Fun</i></marquee>
|
||||||
|
<p>Share your game screenshot on Linkedin after Play with hashtags <b>#LearnInspireGrow #SnakeGame. Also add your name in Marquee.</b></p>
|
||||||
|
<script>
|
||||||
|
// Made with loves !
|
||||||
|
var body = [];
|
||||||
|
var state = 0;// 0->right, 1->down, 2- left, 3 is up;
|
||||||
|
|
||||||
|
//step 1
|
||||||
|
var canvas = document.getElementById("myCanvas");
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.fillStyle = "#A7D948";
|
||||||
|
ctx.fillRect(0, 0, 520, 520);
|
||||||
|
|
||||||
|
//step 2
|
||||||
|
function handleKey(e) {
|
||||||
|
e = e || window.event;
|
||||||
|
var play = false;
|
||||||
|
|
||||||
|
if (e.keyCode == '38'&&state!=1&&state!=3) {
|
||||||
|
// up arrow
|
||||||
|
state = 3;
|
||||||
|
play = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (e.keyCode == '40'&&state!=1&&state!=3) {
|
||||||
|
// down arrow
|
||||||
|
state = 1;
|
||||||
|
play = true;
|
||||||
|
}
|
||||||
|
else if (e.keyCode == '37'&&state!=0&&state!=2) {
|
||||||
|
// left arrow
|
||||||
|
state = 2;
|
||||||
|
play = true;
|
||||||
|
}
|
||||||
|
else if (e.keyCode == '39'&&state!=0&&state!=2) {
|
||||||
|
// right arrow
|
||||||
|
state = 0;
|
||||||
|
play = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(play)
|
||||||
|
playAudio();
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
document.onkeydown = handleKey;
|
||||||
|
|
||||||
|
function playAudio(){
|
||||||
|
var audio = new Audio('https://www.soundjay.com/switch/switch-1.wav');
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
function playConsume(){
|
||||||
|
var audio = new Audio('https://www.soundjay.com/button/button-3.wav');
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
var N = 20;
|
||||||
|
var size = 520;
|
||||||
|
var cellSize = size/N;
|
||||||
|
var matrix = new Array(N);
|
||||||
|
for (var i = 0; i < matrix.length; i++) {
|
||||||
|
matrix[i] = new Array(N);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCell(i,j){
|
||||||
|
if( (i+j)%2==0 ) {
|
||||||
|
ctx.fillStyle = ("#8ECC39");
|
||||||
|
}else{
|
||||||
|
ctx.fillStyle = "#A7D948";
|
||||||
|
}
|
||||||
|
ctx.fillRect(cellSize*i, cellSize*j, cellSize, cellSize);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < matrix.length; i++){
|
||||||
|
for (var j = 0; j < matrix[i].length; j++){
|
||||||
|
matrix[i][j]=0;
|
||||||
|
drawCell(i,j);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body.push([1+ N/2,N/2]);
|
||||||
|
body.push([N/2,N/2]);
|
||||||
|
body.push([-1+N/2,N/2]);
|
||||||
|
|
||||||
|
var eyeImage = new Image();
|
||||||
|
eyeImage.src = "https://i.imgur.com/6jLbz7l.png";
|
||||||
|
|
||||||
|
var foodImage = new Image();
|
||||||
|
foodImage.src = "https://i.imgur.com/88saChB.png";
|
||||||
|
|
||||||
|
var counter = 0;
|
||||||
|
var foodX = 0;
|
||||||
|
var foodY = 0;
|
||||||
|
|
||||||
|
function generateFood(){
|
||||||
|
|
||||||
|
var success = false;
|
||||||
|
while(!success){
|
||||||
|
foodX = parseInt(Math.random()*N);
|
||||||
|
foodY = parseInt(Math.random()*N);
|
||||||
|
|
||||||
|
success = true;
|
||||||
|
for(var i=0;i<body.length;i++){
|
||||||
|
if(body[i][0]==foodX && body[i][1]==foodY){
|
||||||
|
success = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
generateFood();
|
||||||
|
|
||||||
|
function update(){
|
||||||
|
|
||||||
|
counter++;
|
||||||
|
|
||||||
|
var increase = false;
|
||||||
|
if(body[0][0]==foodX&&body[0][1]==foodY){
|
||||||
|
generateFood();
|
||||||
|
playConsume();
|
||||||
|
increase = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < matrix.length; i++){
|
||||||
|
for (var j = 0; j < matrix[i].length; j++){
|
||||||
|
drawCell(i,j);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.drawImage(foodImage,
|
||||||
|
foodX*cellSize, foodY*cellSize,
|
||||||
|
cellSize, cellSize);
|
||||||
|
|
||||||
|
for(var i=0;i<body.length;i++){
|
||||||
|
ctx.fillStyle = ("#527DF9");
|
||||||
|
ctx.fillRect(cellSize*body[i][0], cellSize*body[i][1], cellSize, cellSize);
|
||||||
|
|
||||||
|
if(i==0){
|
||||||
|
var marginX = cellSize/3;
|
||||||
|
var marginY = cellSize/3;
|
||||||
|
|
||||||
|
if(state==0||state==2){
|
||||||
|
marginX=0;
|
||||||
|
}else if (state==1||state==3){
|
||||||
|
marginY=0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.drawImage(eyeImage,
|
||||||
|
0,28*(counter%9),
|
||||||
|
cellSize,cellSize,
|
||||||
|
cellSize*body[i][0]+marginX,
|
||||||
|
cellSize*body[i][1]+marginY,
|
||||||
|
cellSize, cellSize);
|
||||||
|
ctx.drawImage(eyeImage,
|
||||||
|
0,28*(counter%9),
|
||||||
|
cellSize,cellSize,
|
||||||
|
cellSize*body[i][0]-marginX,
|
||||||
|
cellSize*body[i][1]-marginY,
|
||||||
|
cellSize, cellSize);
|
||||||
|
/*
|
||||||
|
ctx.drawImage(tongueImage,
|
||||||
|
0,(504/21)*(counter%21),
|
||||||
|
48,
|
||||||
|
504/21,
|
||||||
|
cellSize*body[i][0]+cellSize,
|
||||||
|
cellSize*body[i][1]-marginY,
|
||||||
|
cellSize, cellSize);
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0->right, 1->down, 2- left, 3 is up;
|
||||||
|
var x = 0;
|
||||||
|
var y = 0;
|
||||||
|
if(state==0){
|
||||||
|
x++;
|
||||||
|
}
|
||||||
|
else if(state==1){
|
||||||
|
y++;
|
||||||
|
}
|
||||||
|
else if(state==2){
|
||||||
|
x--;
|
||||||
|
}
|
||||||
|
else if(state==3){
|
||||||
|
y--;
|
||||||
|
}
|
||||||
|
|
||||||
|
var first = body[0];
|
||||||
|
var arr = [ first[0]+x , first[1]+y ];
|
||||||
|
body.splice(0,0, arr);
|
||||||
|
|
||||||
|
if(!increase)
|
||||||
|
body.pop();
|
||||||
|
}
|
||||||
|
|
||||||
|
setInterval(update,300);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue