In this tutorial, I will show you a very interesting method is how to make a snake game with JavaScript codes using notepad. I dedicate this post these people who are always want to play with online and coding. I am sure that after making the games, it gives you pleasure by nice looking and play methods. As like my previous post, I will share now some codes for making the snake games with notepad. It's very easy and common games which I learned from code review and now given you to make this.
Firstly you need to copy the codes appear from below:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Feed the Snake v 1.1 beta</title>
<style>
body
{
background:#92a8d1;
color:#FFF;
}
canvas
{
background:#FFF;
}
#controls
{
position:absolute;
top:0;
right:0;
margin:10px;
}
</style>
<script type="text/javascript">
var snake = window.snake || {};
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
window.onload = function(){
document.addEventListener("fullscreenchange", function(){snake.game.adjust();});
document.addEventListener("webkitfullscreenchange", function(){snake.game.adjust();});
document.addEventListener("mozfullscreenchange", function(){snake.game.adjust();});
document.addEventListener("MSFullscreenChange", function(){snake.game.adjust();});
snake.game = (function()
{
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var status=false;
var score = 0;
var old_direction = 'right';
var direction = 'right';
var block = 10;
var score = 0;
var refresh_rate = 250;
var pos = [[5,1],[4,1],[3,1],[2,1],[1,1]];
var scoreboard = document.getElementById('scoreboard');
var control = document.getElementById('controls');
var keys = {
37 : 'left',
38 : 'up',
39 : 'right',
40 : 'down'
};
function adjust()
{
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement )
{
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
control.style.display='none';
}
else
{
canvas.width=850;
canvas.height=600;
control.style.display='inline';
}
}
var food = [Math.round(Math.random(4)*(canvas.width - 10)), Math.round(Math.random(4)*(canvas.height - 10)),];
function todraw()
{
for(var i = 0; i < pos.length; i++)
{
draw(pos[i]);
}
}
function giveLife()
{
var nextPosition = pos[0].slice();
switch(old_direction)
{
case 'right':
nextPosition[0] += 1;
break;
case 'left':
nextPosition[0] -= 1;
break;
case 'up':
nextPosition[1] -= 1;
break;
case 'down':
nextPosition[1] += 1;
break;
}
pos.unshift(nextPosition);
pos.pop();
}
function grow()
{
var nextPosition = pos[0].slice();
switch(old_direction)
{
case 'right':
nextPosition[0] += 1;
break;
case 'left':
nextPosition[0] -= 1;
break;
case 'up':
nextPosition[1] -= 1;
break;
case 'down':
nextPosition[1] += 1;
break;
}
pos.unshift(nextPosition);
}
function loop()
{
ctx.clearRect(0,0,canvas.width,canvas.height);
todraw();
giveLife();
feed();
if(is_catched(pos[0][0]*block,pos[0][1]*block,block,block,food[0],food[1],10,10))
{
score += 10;
createfood();
scoreboard.innerHTML = score;
grow();
if(refresh_rate > 100)
{
refresh_rate -=5;
}
}
snake.game.status = setTimeout(function() { loop(); },refresh_rate);
}
window.onkeydown = function(event){
direction = keys[event.keyCode];
if(direction)
{
setWay(direction);
event.preventDefault();
}
};
function setWay(direction)
{
switch(direction)
{
case 'left':
if(old_direction!='right')
{
old_direction = direction;
}
break;
case 'right':
if(old_direction!='left')
{
old_direction = direction;
}
break;
case 'up':
if(old_direction!='down')
{
old_direction = direction;
}
break;
case 'down':
if(old_direction!='up')
{
old_direction = direction;
}
break;
}
}
function feed()
{
ctx.beginPath();
ctx.fillStyle = "#ff0000";
ctx.fillRect(food[0],food[1],10,10);
ctx.fill();
ctx.closePath();
}
function createfood()
{
food = [Math.round(Math.random(4)*850), Math.round(Math.random(4)*600)];
}
function is_catched(ax,ay,awidth,aheight,bx,by,bwidth,bheight) {
return !(
((ay + aheight) < (by)) ||
(ay > (by + bheight)) ||
((ax + awidth) < bx) ||
(ax > (bx + bwidth))
);
}
function draw(pos)
{
var x = pos[0] * block;
var y = pos[1] * block;
if(x >= canvas.width || x <= 0 || y >= canvas.height || y<= 0)
{
document.getElementById('pause').disabled='true';
snake.game.status=false;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.font='40px san-serif';
ctx.fillText('Game Over',300,250);
ctx.font = '20px san-serif';
ctx.fillStyle='#000000';
ctx.fillText('To Play again Refresh the page or click the Restarts button',200,300);
throw ('Game Over');
}
else
{
ctx.beginPath();
ctx.fillStyle='#000000';
ctx.fillRect(x,y,block,block);
ctx.closePath();
}
}
function pause(elem)
{
if(snake.game.status)
{
clearTimeout(snake.game.status);
snake.game.status=false;
elem.value='Play'
}
else
{
loop();
elem.value='Pause';
}
}
function begin()
{
loop();
}
function restart()
{
location.reload();
}
function start()
{
ctx.fillStyle='#000000';
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle='#ffffff';
ctx.font='40px helvatica';
ctx.fillText('Med.Inc',370,140);
ctx.font='20px san-serif';
ctx.fillText('presents',395,190);
ctx.font='italic 60px san-serif';
ctx.fillText('Feed The Snake',240,280);
var img = new Image();
img.onload = function()
{
ctx.drawImage(img,300,300,200,200);
ctx.fillRect(410,330,10,10);
}
img.src ='snake.png';
}
function fullscreen()
{
launchFullscreen(canvas);
}
return {
pause: pause,
restart : restart,
start : start,
begin: begin,
fullscreen : fullscreen,
adjust : adjust,
};
})();
snake.game.start();
}
</script>
</head>
<body>
<canvas width="850" height="600" id="canvas" style="border:1px solid #333;" onclick="snake.game.begin();">
</canvas>
<div id="controls" style="float:right; text-align:center;">
<input type="button" id="pause" value="Play" onClick="snake.game.pause(this);" accesskey="p">
<input type="button" id="restart" value="Restart" onClick="snake.game.restart();">
<br/><br/>
<input type="button" id="fullscreen" value="Play Fullscreen" onClick="snake.game.fullscreen();">
<br/><br/>
<div style="font-size:24px;">
Score :
<span id="scoreboard">0</span>
</div>
</div>
</body>
</html>
Now open a notepad file and paste the code then save with snake.html
Finally, you are done and now click the icon from where you save the file. And play the games with:
Play
Restart
Play Fullscreen and
Score Menu
You can make it full screen for comfortable playing. For default press Esc button. Ok, guys enjoy the game now which you make With JavaScript Codes Using Notepad.
No comments:
Post a Comment