Home › BOA SNAKE 2.0

BOA SNAKE 2.0

Double Click to restart

Boa is not a game for the faint of heart.
Boa is a vicious snake that will stop at nothing to eat you!
Boa is quick and can turn on a dime to catch you off-guard.
Boa has 15 levels of madness with increasing viciousness.
Boa's only purpose is to --- Eat You ---
Boa is hungry!

Don't let Boa eat you.
Don't let Boa eat himself.
Don't let Boa run into the red boundary.
Don't touch Boa.

Scoring system is finished! If you get a high score I will post your name and screenshot here email me at [email protected].

To take a screenshot on a pc press the PrtSc button at the top of your keyboard and the open mspaint and click paste.

Leader Board

Name	Score	Level	Day
Name	Score	Level	Day

2/23/21: To play with smartphone click the "Toggle Fullscreen for Smartphone Play" button when boa starts moving. To restart double tap and click the button again. Modern browsers don't allow full screen unless there is user intervention like clicking a button.

2/21/21: I finally figured out how to get the database sorted automatically after the score is submitted. I am planning on writing a post on all of this once I have it all figured out.

2/20/21: For smartphone play click the button for smartphone play and when the browser redirects and the boa gets started click the lock screen button. IPhone safari browser cant go full screen so it doesn't work.

2/17/21: Smartphone play is working better but still needs work. You have to click "Go Fullscreen" and then double tap and click it again to replay.

2/16/21: It's almost working for smartphone's and would work if I could keep the mobile browser's address bar locked during play.

2/14/21: The scoring system is up and working!

Here is the html / javascript code: Simply copy it into your favorite text editor and save it under the all files with the extension .html like "boa.html" and double click on the file in the file explorer to run it. Make edits to the file and save it and refresh the browser to see the changes. It really is that simple.

<!--BOA SNAKE 2.0 by: Pete01507 2-3-2021-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.80, user-scalable=yes">
<title>BOA SNAKE 2.0</title>
</head>
<style>
	html, body {margin: 0; height: 100%; overflow: hidden}
#contentContainer {
	width: 500px;
	border: 2px #000 solid;
	padding: 5px;
	color: #0095DD;
	background-color: #3d3d3d;
	font-size: 20px;
	font-weight: 500;
	font-family: Arial, Helvetica, sans-serif;
}
.lid {
	height: 20px;
	display: inline-block;
	color: #0095DD;
	background-color: #3d3d3d;
	font-size: 20px;
	font-weight: 500;
	font-family: Arial, Helvetica, sans-serif;
}
#score {
	width: 125px;
	height: 20px;
	display: inline-block;
	color: #0095DD;
	background-color: #3d3d3d;
	font-size: 20px;
	font-weight: 500;
	font-family: Arial, Helvetica, sans-serif;
}
#level, #seconds {
	width: 70px;
	height: 20px;
	display: inline-block;
	color: #0095DD;
	background-color: #3d3d3d;
	font-size: 20px;
	font-weight: 500;
	font-family: Arial, Helvetica, sans-serif;
}
#name {
	width: 175px;
	height: 20px;
	display: inline-block;
	color: #0095DD;
	background-color: #3d3d3d;
	font-size: 20px;
	font-weight: 500;
	font-family: Arial, Helvetica, sans-serif;
}
#bt {
  background-color: #e7e7e7;
  height: 30px;
  border: 2px #000 solid;
  border-radius: 5px;
  color: black;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left: 50px;
  padding: 5px 5px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  font-weight: 100;
  font-size: 16px;
}
</style>
<canvas id="canvas" width="500" height="500" 
style="background-color: #3d3d3d"></canvas>
<div id="contentContainer">
<form action="/scorekeeper.php" method="post" target="_blank">
  <label class="lid" for="score">Score:</label>
  <input type="number" id="score" name="score" readonly>
  <label class="lid" for="level">Level:</label>
  <input type="number" id="level" name="level" readonly>
  <label class="lid" for="seconds">Time Left:</label>
  <input type="number" id="seconds" name="seconds" readonly>
  <label class="lid" for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input id="bt" type="submit" value="Submit Score">
</form>	
</div>
<script type="text/javascript">
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.style.cursor = "cell";
var sc = document.getElementById('score');
var lev = document.getElementById('level');
var sec = document.getElementById('seconds');
ctx.lineWidth = "6";
ctx.strokeStyle = "#c00600";
ctx.strokeRect(3, 2, 495, 495);
document.addEventListener('mousemove', setPosition, false);
document.addEventListener("touchstart", tsPosition, false);
document.addEventListener("touchmove", tmPosition, false);
document.addEventListener("touchend", tePosition, false);
document.addEventListener("touchleave", tlPosition, false);
document.addEventListener('dblclick', restart, false);
var x = 490, y = 490, xx = 485, yy = 485, mx=0, my=0, xx, yy, seconds = 10, t = 15, score = 0, level = 1;
let draw;
ctx.moveTo(x, y);
ctx.lineCap = 'round';
ctx.lineWidth = 4;
ctx.strokeStyle = '#ecc900';
	function setPosition(e) {
	  mx = e.clientX - canvas.offsetLeft;// - 250;
	  my = e.clientY - canvas.offsetTop+window.scrollY;//230;
	} 
	function tsPosition(e) {
		e.preventDefault();
		//mx = e.pageX;
		//my = e.pageY;
	}
	function tmPosition(e) {
		e.preventDefault();
 		var touches = event.changedTouches;
	    for(var i=0; i < event.changedTouches.length; i++) {
	        var touchId = event.changedTouches[i].identifier;
	        mx = event.changedTouches[i].pageX - canvas.offsetLeft;
	        my = event.changedTouches[i].pageY - canvas.offsetTop+window.scrollY;
	    }
		//mx = e.pageX;
		//my = e.pageY;
	}
	function tePosition(e) {
	  //mx = e.pageX;
	  //my = e.pageY;
	} 
	function tlPosition(e) {
	  //mx = e.pageX;
	  //my = e.pageY;
	}    
	function line() {
		if (draw){
		ctx.beginPath();
		if(mx < x){x = x - 1; xx = x - 5;}
		if(my < y){y = y - 1; yy = y - 5;}
		if(mx > x){x = x + 1; xx = x + 5;}
		if(my > y){y = y + 1; yy = y + 5;}
		ctx.lineTo(x, y);
		ctx.stroke(); 
		score=score+1;
    	var p = ctx.getImageData(xx, yy, 1, 1).data; 
    	var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    	if (hex != "#000000") {
    		draw = false;
    		gameover();
    	}
		var p = ctx.getImageData(mx, my, 1, 1).data; 
    	var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6);
    	if (hex == "#ecc900") {
    		draw = false;
    		gameover();
    	}
    	if (seconds == 0){
    		t=t-1;
    		level=level+1
    		seconds=10;
    		ctx.clearRect(0, 0, canvas.width, canvas.height);
    		ctx.lineWidth = "6";
			ctx.strokeStyle = "#c00600";
			ctx.strokeRect(3, 2, 495, 495);
			ctx.lineCap = 'round';
			ctx.lineWidth = 4;
			ctx.strokeStyle = '#ecc900';
			var interval = setInterval(line, t);
    	}
    	if (level == 15 && seconds == 0){
    		alert("YOU WIN, CONGRATS!");
    		draw = false;
    		clearInterval(interval);
  			clearInterval(cancel);
    	}
    	}		
	}

	if(draw = true){
		var interval = setInterval(line, t);
		var cancel = setInterval(incrementSeconds, 1000);			
	}
	
	function gameover() {
  		ctx.font = "44px Arial";
  		ctx.fillStyle = "#0095DD";
  		ctx.fillText("GAME OVER", 100, 250);
  		clearInterval(interval); // Needed for Chrome to end game
  		clearInterval(cancel);
  		draw = false;
	}

	function rgbToHex(r, g, b) {
	    if (r > 255 || g > 255 || b > 255)
	        throw "Invalid color component";
	    return ((r << 16) | (g << 8) | b).toString(16);
	}

	function incrementSeconds() {
		seconds -= 1;
	    sec.value = seconds;
	    sc.value = score;
	    lev.value = level;   
	}

	function restart() {
		// need to save high score date and name
		document.location.reload();
	}

</script>
</html>

#BOA #Addicting #Fun #Easy #Snake #Game #html #javascript #coding #Learning #SourceCode #Educational #Free #code

Leave a Reply Cancel reply