|
Сообщение от Роман1479
|
|
Можно ли модернизировать игру
|
да
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
canvas {
border: 5px solid black;
margin:auto
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var empty=9;
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var ar=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0];
var im=shuffle([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0]);
for(var i=0;i< 16;i++){
if(im[i]==0){
empty=i+1;
}
}
var restart=0;
function won(){
ctx.clearRect(450,450,150,150);
var img=document.getElementById("puzz16");
var pat=ctx.createPattern(img,"repeat");
ctx.fillStyle=pat;
ctx.fillRect(450,450,150,150);
restart=1;
}
function draw(){
var t;
t=0;
if(restart==1){
im=shuffle([1,2,3,4,5,6,7,8,0,9,10,11,12,13,14,15,0]);
for(var i=0;i< 16;i++){
if(im[i]==0){
empty=i+1;
}
}
ctx.clearRect(0,0,600,600);
restart=0;
}
for(var i=0;i<16;i++){
if(im[i]!=ar[i]){
t=1;
}
}
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
component(i,j);
}
}
if(t==0){
won();
}
}
function component(x, y){
var text="puzz";
z=x+4*y;
z=im[z];
text=text+z.toString();
if(z!=0){
var img=document.getElementById(text);
var pat=ctx.createPattern(img,"repeat");
ctx.fillStyle=pat;
}
else{
ctx.fillStyle="white";
}
ctx.fillRect(150*x,150*y,150,150);
}
// *************************************************************************************************
function moveup() {
ctx.clearRect(0,0,600,600);
if(restart==1){
draw();
return;
}
if(empty==13||empty==14||empty==15||empty==16){
draw();
}
else{
text="puzz";
var curr=empty;
empty=empty+4;
var next=empty;
im[curr-1]=im[next-1];
im[next-1]=0;
draw();
}
}
function movedown() {
ctx.clearRect(0,0,600,600);
if(restart==1){
draw();
return;
}
if(empty==1||empty==2||empty==3||empty==4) {
draw();
}
else{
text="puzz";
var curr=empty;
empty=empty-4;
var next=empty;
im[curr-1]=im[next-1];
im[next-1]=0;
draw();
}
}
function moveleft() {
ctx.clearRect(0,0,600,600);
if(restart==1){
draw();
return;
}
if(empty==4||empty==8||empty==12||empty==16) {
draw();
}
else{
text="puzz";
var curr=empty;
empty=empty+1;
var next=empty;
im[curr-1]=im[next-1];
im[next-1]=0;
draw();
}
}
function moveright() {
ctx.clearRect(0,0,600,600);
if(restart==1){
draw();
return;
}
if(empty==1||empty==5||empty==9||empty==13) {
draw();
}
else{
text="puzz";
var curr=empty;
empty=empty-1;
var next=empty;
im[curr-1]=im[next-1];
im[next-1]=0;
draw();
}
}
window.addEventListener('keydown', function (e) {
key = e.keyCode;
if(key==37){
e.preventDefault();
moveleft();
}
if(key==38){
e.preventDefault();
moveup();
}
if(key==39){
e.preventDefault();
moveright();
}
if(key==40){
e.preventDefault();
movedown();
}
if(key==83){
e.preventDefault();
start();
}
});
function start(){
draw();
}
ctx.font = "30px Arial";
ctx.fillText("Hit S to start the game",150,210);
}
</script>
</head>
<body>
<div id="top" style="width:1500px; margin:auto; margin-top:10px; text-align:center">
<div style="margin-top:10px; height:1000px;">
<div>
<div style="width:50%; float:left; display:inline">
<div>
<canvas id="canvas" height="600" width="600"></canvas>
</div>
</div>
<div style=" padding-top:2px; text-align:center; width:50% padding-top:10px">
<div style="margin:auto">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-1-tip3-150x150.jpg" id="puzz1" width="150" height="150">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-2-tip3-150x150.jpg" id="puzz2" width="150" height="150">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-3-tip3-150x150.jpg" id="puzz3" width="150" height="150">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-4-tip3-150x150.jpg" id="puzz4" width="150" height="150">
</div>
<div>
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-5-tip1-150x150.jpg" id="puzz5" width="150" height="150">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-6-tip3-150x150.jpg" id="puzz6" width="150" height="150">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-7-tip3-150x150.jpg" id="puzz7" width="150" height="150">
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-8-tip1-150x150.jpg" id="puzz8" width="150" height="150">
</div>
<div>
<img src="http://izgotovlenie-trafaretov.ru/wp-content/uploads/2014/11/trafaret-cifra-9-tip1-150x150.jpg" id="puzz9" width="150" height="150">
<img src="http://detskiy-sad.com/wp-content/uploads/2014/01/uchim-cifri-012-150x150.gif" id="puzz10" width="150" height="150">
<img src="http://detskiy-sad.com/wp-content/uploads/2014/01/uchim-cifri-013-150x150.gif" id="puzz11" width="150" height="150">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Lottokugel-12.png/150px-Lottokugel-12.png" id="puzz12" width="150" height="150">
</div>
<div style="text-align: right;margin-right: 69px;">
<img src="http://voopiik-don.ru/main/images/stories/actions/Rcenter/count13.jpg" id="puzz13" width="150" height="150">
<img src="https://s12emagst.akamaized.net/products/14847/14846069/images/res_124aaa44b7a4826d69ba7ebff8ab5fa4_150x150_22nm.jpg" id="puzz14" width="150" height="150">
<img src="https://s12emagst.akamaized.net/products/13351/13350335/images/res_1b7500370311dd22b1c320f0f8e4ff40_150x150_qt88.jpg" id="puzz15" width="150" height="150">
<img src="http://a2b2.ru/storage/images/person/34/gallery/1292/10107_preview_16-2.png" id="puzz16" width="150" height="150">
</div>
</div>
</div>
</div>
</div>
</body>
</html>