|
Senior Coder
Join Date: Aug 2006
Location: Southampton
Posts: 1,460
Thanks: 89
Thanked 110 Times in 109 Posts
|
puzzle bordem
Here is the code for a puzzle game... enjoy! i can't complete it so i got no way of testing if the win game part works but think it should
Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Transitions</title>
<script type="text/javascript">
var image = new Image();
var hit = false;
var done = false;
var move_i = 0;
var missing_pos =0;
var move_counter = 0;
var direction = "left";
var clipping_x = new Array();
var clipping_y = new Array();
var position_x = new Array();
var position_y = new Array();
var random_clips = new Array();
clipping_x[1] = 0;
clipping_y[1] = 0;
clipping_x[2] = 100;
clipping_y[2] = 0;
clipping_x[3] = 200;
clipping_y[3] = 0;
clipping_x[4] = 0;
clipping_y[4] = 100;
clipping_x[5] = 100;
clipping_y[5] = 100;
clipping_x[6] = 200;
clipping_y[6] = 100;
clipping_x[7] = 0;
clipping_y[7] = 200;
clipping_x[8] = 100;
clipping_y[8] = 200;
clipping_x[9] = 200;
clipping_y[9] = 200;
var position_x = clipping_x;
var position_y = clipping_y;
var missing_one = 1;
function init() {
image.src = "img.jpg";
canvas = document.getElementsByTagName('canvas')[0];
context = canvas.getContext('2d');
for(i=1;i<10;i++)
{
do
{
rand = Math.floor((Math.random()*9)+1);
}while(in_array(rand, random_clips))
random_clips[i] = rand;
}
for(i=1;i<10;i++)
{
if(random_clips[i]!=missing_one)
context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i], 100, 100);
else
missing_pos = i;
}
console.dir(random_clips);
intertimer = setInterval(main_loop, 1);
/*
context.drawImage(image, 0,0, 100, 100, 0, 0, 100, 100);
context.drawImage(image, 100,0, 100, 100, 100, 0, 100, 100);
context.drawImage(image, 200,0, 100, 100, 200, 0, 100, 100);
context.drawImage(image, 0, 100, 100, 100, 0, 100, 100, 100);
context.drawImage(image, 100,100, 100, 100, 100, 100, 100, 100);
context.drawImage(image, 200,100, 100, 100, 200, 100, 100, 100);
context.drawImage(image, 0, 200, 100, 100, 0, 200, 100, 100);
context.drawImage(image, 100, 200, 100, 100, 100, 200, 100, 100);
context.drawImage(image, 200, 200, 100, 100, 200, 200, 100, 100);
*/
}
function main_loop()
{
document.onmousemove = function( ev ){
x_mouse_pos = ev.pageX;
y_mouse_pos = ev.pageY;
};
document.onclick = function( ev ){
if(x_mouse_pos > 0 && x_mouse_pos < 100)
{
if(y_mouse_pos > 0 && y_mouse_pos < 100 && missing_pos!=1)
{
move_i = 1;
hit = true;
}
}
if(x_mouse_pos > 100 && x_mouse_pos < 200)
{
if(y_mouse_pos > 0 && y_mouse_pos < 100 && missing_pos!=2)
{
move_i = 2;
hit = true;
}
}
if(x_mouse_pos > 200 && x_mouse_pos < 300)
{
if(y_mouse_pos > 0 && y_mouse_pos < 100 && missing_pos!=3)
{
move_i = 3;
hit = true;
}
}
if(x_mouse_pos > 0 && x_mouse_pos < 100)
{
if(y_mouse_pos > 100 && y_mouse_pos < 200 && missing_pos!=4)
{
move_i = 4;
hit = true;
}
}
if(x_mouse_pos > 100 && x_mouse_pos < 200)
{
if(y_mouse_pos > 100 && y_mouse_pos < 200 && missing_pos!=5)
{
move_i = 5;
hit = true;
}
}
if(x_mouse_pos > 200 && x_mouse_pos < 300)
{
if(y_mouse_pos > 100 && y_mouse_pos < 200 && missing_pos!=6)
{
move_i = 6;
hit = true;
}
}
if(x_mouse_pos > 0 && x_mouse_pos < 100)
{
if(y_mouse_pos > 200 && y_mouse_pos < 300 && missing_pos!=7)
{
move_i = 7;
hit = true;
}
}
if(x_mouse_pos > 100 && x_mouse_pos < 200)
{
if(y_mouse_pos > 200 && y_mouse_pos < 300 && missing_pos!=8)
{
move_i = 8;
hit = true;
}
}
if(x_mouse_pos > 200 && x_mouse_pos < 300)
{
if(y_mouse_pos > 200 && y_mouse_pos < 300 && missing_pos!=9)
{
move_i = 9;
hit = true;
}
}
};
if(hit)
{
hit= false;
if(check_next_to_hit())
{
clearInterval(intertimer);
movetimer = setInterval(move_loop, 1);
}
else
{
intertimer = setInterval(main_loop, 1);
}
}
}
function move_loop()
{
if(move_counter>=100)
{
clearInterval(movetimer);
//test for game over
win = true;
for(i=1;i<10;i++)
{
if(random_clips[i]!=i)
win = false;
}
if(win)
window.alert("well done!");
//
/* This bit below was hard for me */
var key = random_clips.getKeyByValue(missing_one);
random_clips[key] = random_clips[move_i];
random_clips[move_i] = missing_one;
missing_pos = move_i;
move_i=0;
move_counter= 0;
done = true;
console.dir(random_clips);
intertimer = setInterval(main_loop, 1);
}
else
{
for(i=1;i<10;i++)
{
if(random_clips[i]!=missing_one)
{
if(random_clips[i] == random_clips[move_i])
{
context.fillStyle="white";
context.fillRect(position_x[i], position_y[i], 100, 100);
switch(direction)
{
case "left":
context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i]-move_counter, position_y[i], 100, 100);
break;
case "right":
context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i]+move_counter, position_y[i], 100, 100);
break;
case "up":
context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i]-move_counter, 100, 100);
break;
case "down":
context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i]+move_counter, 100, 100);
break;
}
}
else
context.drawImage(image, clipping_x[random_clips[i]], clipping_y[random_clips[i]], 100, 100,position_x[i], position_y[i], 100, 100);
}
}
}
move_counter++;
}
function check_next_to_hit()
{
switch(move_i)
{
case 1:
if(missing_pos ==2)
{
direction = "right";
return true;
}
if(missing_pos==4)
{
direction = "down";
return true;
}
break;
case 2:
if(missing_pos ==3)
{
direction = "right";
return true;
}
if(missing_pos==1)
{
direction = "left";
return true;
}
if(missing_pos==5)
{
direction = "down";
return true;
}
break;
case 3:
if(missing_pos ==2)
{
direction = "left"
return true;
}
if(missing_pos==6)
{
direction = "down";
return true;
}
break;
case 4:
if(missing_pos ==1)
{
direction = "up";
return true;
}
if(missing_pos ==5)
{
direction = "right";
return true;
}
if(missing_pos ==7)
{
direction = "down";
return true;
}
break;
case 5:
if(missing_pos ==2)
{
direction = "up";
return true;
}
if(missing_pos==4)
{
direction = "left";
return true;
}
if(missing_pos==6)
{
direction = "right";
return true;
}
if(missing_pos==8)
{
direction = "down";
return true;
}
break;
case 6:
if(missing_pos ==3)
{
direction = "up";
return true;
}
if(missing_pos ==5)
{
direction = "left";
return true;
}
if(missing_pos ==9)
{
direction = "down";
return true;
} break;
case 7:
if(missing_pos ==4)
{
direction = "up"
return true;
}
if(missing_pos==8)
{
direction = "right";
return true;
}
break;
case 8:
if(missing_pos ==7)
{
direction = "left";
return true;
}
if(missing_pos ==5)
{
direction = "up";
return true;
}
if(missing_pos ==9)
{
direction = "right";
return true;
}
break;
case 9:
if(missing_pos ==6)
{
direction = "up"
return true;
}
if(missing_pos==8)
{
direction = "left";
return true;
}
break;
}
return false;
}
function in_array (needle, haystack, argStrict) {
// Checks if the given value exists in the array
//
// version: 1109.2015
// discuss at: http://phpjs.org/functions/in_array // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// + improved by: vlado houba
// + input by: Billy
// + bugfixed by: Brett Zamir (http://brett-zamir.me)
// * example 1: in_array('van', ['Kevin', 'van', 'Zonneveld']); // * returns 1: true
// * example 2: in_array('vlado', {0: 'Kevin', vlado: 'van', 1: 'Zonneveld'});
// * returns 2: false
// * example 3: in_array(1, ['1', '2', '3']);
// * returns 3: true // * example 3: in_array(1, ['1', '2', '3'], false);
// * returns 3: true
// * example 4: in_array(1, ['1', '2', '3'], true);
// * returns 4: false
var key = '', strict = !! argStrict;
if (strict) {
for (key in haystack) {
if (haystack[key] === needle) { return true;
}
}
} else {
for (key in haystack) { if (haystack[key] == needle) {
return true;
}
}
}
return false;
}
Object.prototype.getKeyByValue = function( value ) {
for( var prop in this ) {
if( this.hasOwnProperty( prop ) ) {
if( this[ prop ] === value )
return prop;
}
}
}
</script>
</head>
<body onload="init();">
<canvas width="500" height="500"></canvas>
</body>
</html>
just put it in your webserver and add a 300px x 300px image called 'img.jpg' in the same folder. Here i uploaded an image for you
Enjoy!
__________________
You can not say you know how to do something, until you can teach it to someone else.
|
|
Before you post, read our: 
