I cannot show the image moved by JavaScript commands where I want

user_12287799 0
Viewed 52

var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "images/head.png", 10, 120, "image");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 880;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        //this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x = this.speedX;
        this.y = this.speedY;        
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY = 60; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
header{
  width: 101.2%;
  height: 60px;
  margin-top:-8px;
  margin-left: -8px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
footer{
  position:static;
  background-color: red;
  width: 101.2%;
  height: 30px;
  margin-top:260px;
  margin-left: -8px;
  margin-bottom: -8px;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin:auto;
  background-color: white   ;
}

.flex-container > div {
  background-color: #fff;
  width: 180px;
  height: 100px;
  margin: 10px;
  border-radius: 20px/50px; 
  border-radius: 50px/20px;
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}
.container{
  display: block;
  width: 400px;
  height: 50px;
  border: 2px solid  #0822c9;
  margin: 20px auto 40px auto;
  text-align: center; 
  font-weight: bold; 
  font-size: 36px; 
  color: #311B92;
}
.img{
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: 28px;
  margin-left:300px;
}
.senaryo{
  background-color: blue;
  width: auto;
  height: 400px;
}
.anayapi {
  display: -webkit-flex;
  display: flex;
}


.sol {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  background: #ccc;
  padding: 20px;
}

.vr{ 
  border-left: 1px solid black;
  height: 500px;
  margin-left:250px;
}

.sag {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}
.droptarget {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.droptarget1 {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.droptarget2 {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.droptarget3 {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.krk{
  background-color: black;
  width: 200px; 
  height: 500px ;
  margin: 20px 30px 40px 50px;
  padding: 10px;
}
<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="surukle.css" >
<style>
</style>
</head>
<header > Hoşgeldin
  <img class="img" src="images/uyegirisi.png" >
  </header>
<body onload="startGame()">
    <hr>
    <div class="anayapi">
      <div class="sag"  onload="startGame()">
      
      </div>
      <div class="sol">
              
        <div class="droptarget">
          <p draggable="true" id="dragtarget">İnterneti Aç</p>
        </div>
        <div class="droptarget"></div>
        <p id="demo"></p>
        
        <div class="droptarget1">
          <p draggable="true" id="dragtarget1">Bitir</p>
        </div>
        <div class="droptarget1"></div>
        <p id="demo"></p>
        
        <div class="droptarget2">
          <p draggable="true" id="dragtarget2">kontrol_et()</p>
        </div>
        <div class="droptarget2">
        </div>
        <p id="demo"></p>

        <div class="droptarget3">
          <p draggable="true" id="dragtarget3">Başla</p>
        </div>
        <div class="droptarget3"></div>
        <p id="demo"></p>

        <div class="droptarget3">
          <p draggable="true" id="dragtarget4">Telefonu Al</p>
        </div>
        <div class="droptarget3"></div>
        <p id="demo"></p>        
        <div class="vr"></div>
      </div>
      
    </div>
    
</body>
</html>

I cannot show the image moved by JavaScript commands where I want. I want it to play in the gray part on the left, but the onload="startGame()" function can only be written in the body and it stays at the top of the page. What should I do to be able to run this build in the gray area on the left? I tried writing the startGame function inside the "sag" div but it didn't work.

  <!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="surukle.css" >
<style>
</style>
</head>
<header > Hoşgeldin
  <img class="img" src="images/uyegirisi.png" >
  </header>
<body onload="startGame()">
    <hr>
    <div class="anayapi">
      <div class="sag"  onload="startGame()">
      
      </div>
      <div class="sol">
              
        <div class="droptarget">
          <p draggable="true" id="dragtarget">İnterneti Aç</p>
        </div>
        <div class="droptarget"></div>
        <p id="demo"></p>
        
        <div class="droptarget1">
          <p draggable="true" id="dragtarget1">Bitir</p>
        </div>
        <div class="droptarget1"></div>
        <p id="demo"></p>
        
        <div class="droptarget2">
          <p draggable="true" id="dragtarget2">kontrol_et()</p>
        </div>
        <div class="droptarget2">
        </div>
        <p id="demo"></p>

        <div class="droptarget3">
          <p draggable="true" id="dragtarget3">Başla</p>
        </div>
        <div class="droptarget3"></div>
        <p id="demo"></p>

        <div class="droptarget3">
          <p draggable="true" id="dragtarget4">Telefonu Al</p>
        </div>
        <div class="droptarget3"></div>
        <p id="demo"></p>        
        <div class="vr"></div>
      </div>
      <script>
        var myGamePiece;

function startGame() {
    myGamePiece = new component(30, 30, "images/head.png", 10, 120, "image");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 880;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        //this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function() {
        clearInterval(this.interval);
    }
}

function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image, 
                this.x, 
                this.y,
                this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x = this.speedX;
        this.y = this.speedY;        
    }
}

function updateGameArea() {
    myGameArea.clear();
    myGamePiece.newPos();
    myGamePiece.update();
}

function moveup() {
    myGamePiece.speedY = 60; 
}

function movedown() {
    myGamePiece.speedY = 1; 
}

function moveleft() {
    myGamePiece.speedX = -1; 
}

function moveright() {
    myGamePiece.speedX = 1; 
}

function clearmove() {
    myGamePiece.speedX = 0; 
    myGamePiece.speedY = 0; 
}
      </script>
    </div>
    
</body>
</html>

surukle.css

header{
  width: 101.2%;
  height: 60px;
  margin-top:-8px;
  margin-left: -8px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
footer{
  position:static;
  background-color: red;
  width: 101.2%;
  height: 30px;
  margin-top:260px;
  margin-left: -8px;
  margin-bottom: -8px;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin:auto;
  background-color: white   ;
}

.flex-container > div {
  background-color: #fff;
  width: 180px;
  height: 100px;
  margin: 10px;
  border-radius: 20px/50px; 
  border-radius: 50px/20px;
  border-radius: 50%;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  box-shadow: 0 4px 80px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  
}
.container{
  display: block;
  width: 400px;
  height: 50px;
  border: 2px solid  #0822c9;
  margin: 20px auto 40px auto;
  text-align: center; 
  font-weight: bold; 
  font-size: 36px; 
  color: #311B92;
}
.img{
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: 28px;
  margin-left:300px;
}
.senaryo{
  background-color: blue;
  width: auto;
  height: 400px;
}
.anayapi {
  display: -webkit-flex;
  display: flex;
}


.sol {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  background: #ccc;
  padding: 20px;
}

.vr{ 
  border-left: 1px solid black;
  height: 500px;
  margin-left:250px;
}

.sag {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}
.droptarget {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.droptarget1 {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.droptarget2 {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.droptarget3 {
  float: left; 
  width: 200px; 
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
.krk{
  background-color: black;
  width: 200px; 
  height: 500px ;
  margin: 20px 30px 40px 50px;
  padding: 10px;
}
css html javascript
0 Answers
Related